<template>
  <!-- 经销商详情 -->
  <div class="box">
    <div class="tit_name">
      <div class="p1">{{ shopInfo.storeName }}</div>
      <div></div>
    </div>
    <div class="shopIntroduc">
      <div class="shopIntroduc_left">
        <div class="p2">店铺介绍</div>
        <div class="p3 ">
          <pack-up-text2 :text="shopInfo.storeIntroduction"></pack-up-text2>
          <!-- {{ shopInfo.storeIntroduction }} -->
        </div>
      </div>
      <div class="shopIntroduc_right" style="color: #333333">
        <!-- <el-tooltip
          :content="shopInfo.contactPhoneNumber"
          placement="top"
          v-if="shopInfo && shopInfo.contactPhoneNumber"
          @click.native="phoneGet"
        >
          <img
            style="cursor: pointer"
            src="../../../../assets/dianhua_lan.png"
            alt=""
          />
        </el-tooltip>
        <img
          style="cursor: pointer"
          src="../../../../assets/dianhua_lan.png"
          alt=""
          v-else
        /> -->
      </div>
    </div>
    <!-- 显示7张图的跑马灯轮播 -->
    <transition name="fade">
      <div class="swiper-btn-control-wrap center" style="width:940px!important;">
        <div class="swiper-btn-control btn-control1" @click.stop="prev">
          <span class="el-icon-arrow-left btn-control"></span>
        </div>
        <div class="swiper-btn-control btn-control2" @click.stop="next">
          <span class="el-icon-arrow-right btn-control"></span>
        </div>
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper" style="width:940px!important;">
          <div v-for="(item, index) in imgs" v-if="item.type == 2" :style="config5[index]" :key="item.cover"
            @mouseover="swiper = false" @mouseleave="swiper = true">
            <img v-if="item.remarks == 1" :src="item.image" style="width: 100%; height: 100%; cursor: pointer"
              @click="particulars(item.id)" />
            <video v-if="item.remarks == 2" controls :src="item.image"
              style="width: 100%; height: 100%; cursor: pointer; background: #aaa"></video>
          </div>
          <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
        </div>
      </div>
    </transition>
    <div class="titLiat">
      <div @click="leibieClick(item.num)" :class="leibieXuan == item.num ? 'li cur' : 'li'" v-for="(item, index) in list"
        :key="item.num">
        <template v-if="index == 4 && recruitList.length > 0">
          <p>{{ item.name }}</p>
          <img v-if="item.num == leibieXuan" src="../../../../assets/xuanzhong.png" />
        </template>
        <template v-else>
          <p>{{ item.name }}</p>
          <img v-if="item.num == leibieXuan" src="../../../../assets/xuanzhong.png" />
        </template>
      </div>
    </div>
    <div v-if="leibieXuan == 1">
      <div class="bottom">
        <div class="list">
          <div class="li" style="height:225px;" v-for="(item, index) in houseList" :key="index">
            <bbcz-item :item="item" :mwidth="420" @details="details" @toAgent="toAgent"
              @shopdetails="shopdetails"></bbcz-item>
          </div>
        </div>
        <div v-if="houseList.length == 0">
          <el-empty description="还没有在售车系"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
    </div>
    <div v-if="leibieXuan == 2">
      <div class="list2">
        <div class="li" v-for="(item, index) in agentInfoList" :key="index">
          <img class="touxiang" :src="item.userInfo.image ||
            'https://pic.bangbangtongcheng.com/static/my/header.png'
            " @click="toAgent(item)" />
          <div class="name">
            <div @click="toAgent(item)" class="name_num" style="cursor: pointer">
              {{ item.userInfo.nikeName || "未命名用户" }}
            </div>
            <div class="name_jjr">经纪人</div>
          </div>
          <div class="pingfen">
            <div>评分</div>
            <!-- <img
              v-for="(item1, index) in Number(item.userInfo.score)"
              :key="index + 's'"
              src="../../assets/xin_liang.png"
            />
            <img
              v-for="(item1, index) in 5 - item.userInfo.score"
              :key="index + 'y'"
              src="../../assets/xin_hui.png"
            /> -->
            <el-rate v-model="item.score" :disabled="item.score != 0" @change="rateChage($event, item)"></el-rate>
          </div>
          <div class="weigui">
            <div class="wei" @click="showWeigui(item.userId)">
              <span>违规次数</span>
              <span>></span>
              <span style=" width: 18px;display: inline-block; color: red; font-weight: 600; font-size: 20px">{{
                item.violation || 0 }}</span>
            </div>
            <div class="contactWay">
              <div class="lxfs-item">
                <el-tooltip :content="item.userInfo.phone" placement="top"
                  v-if="loginstate && item.userInfo && item.userInfo.phone">
                  <img style="cursor: pointer" src="../../../../assets/dianhua_lan.png" alt="" />
                </el-tooltip>
                <img style="cursor: pointer" src="../../../../assets/dianhua_lan.png" alt="" v-else />

                <div class="lxfs-item-phone" v-if="isPhoneShow">
                  {{ item.userInfo.phone }}
                </div>
              </div>

              <img @click="chat(shopInfo.id)" style="margin-left: 10px; cursor: pointer"
                src="../../../../assets/bbcz/xqlt01.png" alt="" />
            </div>
          </div>
          <div class="xian"></div>
        </div>
      </div>
      <div v-if="agentInfoList.length == 0">
        <el-empty description="还没有经纪人"></el-empty>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
          :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
      </div>
    </div>
    <div v-if="leibieXuan == 3" style="margin-left: 12px;">
      <template v-for="s in ceshiArr">
        <friend-item :item="s" types="3" :wrapWidth="940" :showCollect="false" :forbidClick="true" @reData="getMoreData"
          :key="s.id"></friend-item>
      </template>
      <div v-if="ceshiArr.length == 0">
        <el-empty description="还没有发布帮友圈"></el-empty>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
          :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
      </div>
    </div>
    <div v-if="leibieXuan == 4">
      <div class="vehicleTab" v-if="subLeibie.length > 0" style="height:0;padding-left: 10px;">
        <div v-for="item in subLeibie" :key="item.id" @click.stop="vehicleTabClick(item.id, item.value)"
          class="vehicleTabClass" :class="vehicleTabIndex == item.id ? 'vehicleTab_active' : ''">
          {{ item.name }}
        </div>
      </div>
      <div class="bottom">
        <div class="list">
          <div class="li" style="height:225px;" v-for="(item, index) in houseList" :key="index">
            <bbcz-item :item="item" mwidth="490" @details="details" @toAgent="toAgent"
              @shopdetails="shopdetails"></bbcz-item>
          </div>
        </div>
        <div v-if="houseList.length == 0">
          <el-empty description="还没有现车销售"></el-empty>
        </div>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
    </div>
    <div v-if="leibieXuan == 5">
      <div style="margin: -14px 14px 32px; margin-bottom: 32px; max-width: 1200px" v-if="recruitList.length > 0">
        <invite-item :item="item" v-for="(item, i) in recruitList" :key="item.id" line></invite-item>
        <div class="fenye">
          <el-pagination background layout="prev, pager, next" :total="houseTotal" :page-size="housePage.pageSize"
            :current-change="housePage.pageNo" @current-change="currenthouse"></el-pagination>
        </div>
      </div>
      <div v-if="recruitList.length == 0">
        <el-empty description="还没有在招职位"></el-empty>
      </div>
    </div>
    <inform ref="inform" :bUserId="bUserId"></inform>
  </div>
</template>
<script>
import inform from "../../../index/inform";
import friendItem from "../../../index/comp/bbcz-friend-circle-item.vue";
import BbczItem from "../../../index/comp/bbcz-item.vue";
import inviteItem from "@/views/invite/comp/item";
export default {
  props: {
    tid: {
      type: String | Number
    }
  },
  components: {
    inform,
    BbczItem,
    friendItem,
    inviteItem
  },
  data() {
    return {
      subLeibie: [
        {
          id: 1,
          value: "",
          name: "全部"
        },
        {
          id: 2,
          value: "1",
          name: "到店新车"
        },
        {
          id: 3,
          value: "2",
          name: "二手车"
        }
      ],
      vehicleType: "",
      vehicleTabIndex: 1,
      loginstate: false,
      isCollection: 0,
      checkedCities: [],
      leibieXuan: 1,
      list: [
        { num: 4, name: "现车销售" },
        { num: 2, name: "金牌顾问" },
        { num: 3, name: "帮友圈" },
        { num: 1, name: "在售车系" },
        { num: 5, name: "在招职位" }
      ],
      shopInfo: {},
      // 卡片轮播
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        }
      ],
      housePage: {
        pageNo: 1,
        pageSize: 10
      },
      houseList: [],
      houseTotal: 0,
      agentInfoPage: {
        pageNo: 1,
        pageSize: 8,
        dutyStatus: "1",
        status: "1"
      },
      agentInfoList: [],
      agentInfoTotal: 0,
      articlePage: {
        pageNo: 1,
        pageSize: 10,
        type: "1"
      },
      articleList: [],
      articleTotal: 0,
      articlePage2: {
        pageNo: 1,
        pageSize: 10,
        type: "2"
      },
      articleList2: [],
      bannerList: [],
      searchtext: "",
      t1: "",
      swiper: true,
      bUserId: "",
      imageList: [
        "https://pic.bangbangtongcheng.com/9bee0574a6944631a602c604caf36035",
        "https://pic.bangbangtongcheng.com/9bee0574a6944631a602c604caf36035",
        "https://pic.bangbangtongcheng.com/9bee0574a6944631a602c604caf36035",
        "https://pic.bangbangtongcheng.com/9bee0574a6944631a602c604caf36035"
      ],
      // 测试数组
      ceshiArr: [],
      shopInfoCol: {},
      isPhoneShow: false,
      recruitList: []
    };
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper) {
        this.next();
      }
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.t1);
  },
  created() {
    this.init();
    //回到顶部
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);
  },
  methods: {
    vehicleTabClick(index, value) {
      this.vehicleType = value;
      this.vehicleTabIndex = index;
      this.getMoreData();
    },
    // 关注
    // collect2(item, flag) {
    //   if (this.loginstate) {
    //     this.$postHttp(
    //       "/api/mobile/vehicleOwner/collectionOrCancelCollection",
    //       {
    //         collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
    //         collectionType: "2",
    //         relationId: this.shopInfo.id,
    //         id:
    //           this.shopInfo.collectionAttention &&
    //           this.shopInfo.collectionAttention.id
    //             ? this.shopInfo.collectionAttention.id
    //             : "",
    //       }
    //     ).then((data) => {
    //       if (data.code == 200) {
    //         this.getHouseInfoDetail();
    //         this.$message({
    //           message: data.msg,
    //           type: "success",
    //           offset: 120,
    //           duration: 2000,
    //         });
    //       }
    //     });
    //   } else {
    //     this.$message({
    //       message: "请登录之后在收藏！",
    //       type: "error",
    //       offset: 120,
    //       duration: 2000,
    //     });
    //   }
    // },
    //     rateChage(e,item) {

    //   if (this.loginstate) {
    //     this.disa = true;
    //     this.$postHttp("/mob/user/saveScoreInfo", {
    //       agentId: item.userInfo.id,
    //       userId: JSON.parse(localStorage.getItem("userInfo")).id,
    //       score: e,
    //     }).then((data) => {
    //       if (data.code == 200) {
    //         this.$message({
    //           message: "评分成功！",
    //           type: "success",
    //           offset: 120,
    //           duration: 2000,
    //         });

    //         this.getUserInfoByUserId(this.id, this.userId);
    //       }
    //     });
    //   } else {
    //     this.$message({
    //       message: "请登录之后在进行评分",
    //       type: "error",
    //       offset: 120,
    //       duration: 2000,
    //     });
    //   }
    // },
    phoneGet() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.isPhoneShow = !this.isPhoneShow;

      this.insertCallRecord({
        userId: this.shopInfo.id,
        phone: this.shopInfo.contactPhoneNumber,
        businessType: 2,
        callType: 2
      });

      // if (!this.shopInfoList[index].phonestate) {
      //     this.$postHttp('/mob/user/call',{
      //         userId:this.shopInfoList[index].userId,
      //         telephoneNumber:this.shopInfoList[index].contactsPhone,
      //         associationId:this.shopInfoList[index].id,
      //         type:'1'
      //      }).then(res=>{

      //     })
      // }
      // this.shopInfoList[index].phonestate = !this.shopInfoList[index].phonestate
    },
    //开启聊天
    chat(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.$refs.chats.chatOpne(id);
    },
    async init() {
      this.housePage.id = this.tid;

      console.log("this.housePage.idthis.housePage.id", this.housePage.id);
      this.agentInfoPage.shopId = this.tid;
      this.articlePage.shopId = this.tid;
      this.articlePage2.shopId = this.tid;
      // this.getShopInfoDetail(this.tid)
      this.getUser();
      await this.getHouseInfo();
      // 在售车系/金牌顾问/帮友圈/现车销售
      this.getRecruit();
      this.getMoreData();

      this.getArticleInfo();
      // this.getArticleInfo2()
    },
    getMoreData() {
      // delete this.housePage.id
      // 在售车系/金牌顾问/帮友圈/现车销售
      if (this.leibieXuan == 1) {
        this.getOnSaleVehicleSeries();
      } else if (this.leibieXuan == 2) {
        this.getGoldAdvisor();
      } else if (this.leibieXuan == 3) {
        this.getHelpingFriendsCircle();
      } else if (this.leibieXuan == 4) {
        this.getExistingVehicleSales();
      } else if (this.leibieXuan == 5) {
        this.getRecruit();
      }
    },
    // 获取商家在招职位
    getRecruit() {
      this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
        pageNo: this.housePage.pageNo,
        pageSize: this.housePage.pageSize,
        userId: this.shopInfo.userId
      }).then(res => {
        this.recruitList = res.recruitment.pageList;
        this.houseTotal = res.recruitment.pageCount;
      });
    },
    // 在售车系
    getOnSaleVehicleSeries() {
      // console.log(...this.housePage);
      // this.$getHttp("/api/mobile/vehicleOwner/getDistributorById", {id:this.housePage.id})
      this.$getHttp("/api/mobile/vehicleOwner/getOnSaleVehicleSeries", {
        pageNo: this.housePage.pageNo,
        pageSize: this.housePage.pageSize,
        storeId: this.housePage.id,
        vehicleType: 3
      }).then(res => {
        this.houseList = res.onSaleVehicleSeries.pageList;
        this.houseTotal = res.onSaleVehicleSeries.pageCount;
      });
    },
    // 金牌顾问
    getGoldAdvisor() {
      this.housePage.pageSize = 6;
      this.$getHttp("/api/mobile/vehicleOwner/getGoldAdvisor", {
        pageNo: this.housePage.pageNo,
        pageSize: this.housePage.pageSize,
        storeId: this.housePage.id
      }).then(res => {
        // this.housePage.id
        res.goldAdvisor.pageList.forEach((item, index) => {
          item.score = item.score || 0;
        });
        this.agentInfoList = [...res.goldAdvisor.pageList];
        this.houseTotal = res.goldAdvisor.pageCount;
      });
    },
    //帮友圈
    getHelpingFriendsCircle() {
      this.$getHttp("/api/mobile/vehicleOwner/getHelpingFriendsCircle", {
        pageNo: this.housePage.pageNo,
        pageSize: this.housePage.pageSize,
        storeId: this.housePage.id,
        businessType: 2,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : ""
      }).then(res => {
        res.helpingFriendsCircle.pageList.forEach(item => {
          item.chage = 0;
          item.picture = this.manageImg(item.picture);
          item.imageList = this.manageImg(item.picture);
          item.video = this.manageImg(item.video);
        });

        this.ceshiArr = res.helpingFriendsCircle.pageList;
        this.houseTotal = res.helpingFriendsCircle.pageCount;
      });
    },
    //现车销售
    getExistingVehicleSales() {
      this.$getHttp("/api/mobile/vehicleOwner/getExistingVehicleSales", {
        pageNo: this.housePage.pageNo,
        pageSize: this.housePage.pageSize,
        vehicleType: this.vehicleType,
        storeId: this.housePage.id
      }).then(res => {
        this.houseList = res.existingVehicleSales.pageList;
        this.houseTotal = res.existingVehicleSales.pageCount;
      });
    },

    //判断用户是否登录，如果登录则查询是否收藏
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.housePage.id,
          viewersId: user.id,
          businessType: 2,
          browsingRecords: 2
        }).then(res => { });
        // this.$getHttp("/mob/user/getIsCollection",{userId:user.id,cbType:2,type:1,relationId:this.tid}).then((data) =>{
        // 	if(data.code == 200){
        // 		this.isCollection = data.isCollection
        // 	}
        // })
        // this.$postHttp('/mob/user/saveUserCollection',{
        // 	userId:user.id,
        // 	type:2,
        // 	cbType:2,
        // 	relationId:this.tid,
        // }).then((data)=>{

        // })
      } else {
        this.loginstate = false;
      }
    },
    getHouseInfo() {
      // this.housePage.id
      //
      return this.$getHttp("/api/mobile/vehicleOwner/getDistributorById", {
        id: this.housePage.id
      }).then(data => {
        if (data.code == 200) {
          this.shopInfo = data.distributorList || {};
          // let image = data.shopInfo.image.split('|')
          // for (var i = 0; i < image.length; i++) {
          // 	this.imgs.push({
          // 		index:i,
          // 		cover:image[i]
          // 	})
          // }
          //   this.getHouseInfoDetail();
        }
      });
    },

    getHouseInfoDetail() {
      if (!this.loginstate) {
        return;
      }
      this.$getHttp("/api/mobile/vehicleOwner/getDistributorById", {
        id: this.housePage.id,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : ""
      }).then(data => {
        if (data.code == 200) {
          this.shopInfoCol = data.distributorList;
          // this.houseList = data.list
          // this.houseTotal = data.count
        }
      });
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "3",
            relationId: item.id,
            id:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : ""
          }
        ).then(data => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    goLike(item, flag) {
      if (this.loginstate) {
        // 去点赞
        var obj = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          circleId: item.id
        };
        item.likeRecord && item.likeRecord.id
          ? (obj.id = item.likeRecord.id)
          : "";
        this.$postHttp("/api/mobile/vehicleOwner/upperOrCancelThumb", {
          // id: item.id,
          ...obj
        }).then(data => {
          if (data.code == 200) {
            this.getMoreData();
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在点赞！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    getArticleInfo() {
      this.$getHttp("/mob/user/getArticleInfo", {
        pageNo: 1,
        pageSize: "999",
        businessType: JSON.parse(localStorage.getItem("userInfo"))
          ? JSON.parse(localStorage.getItem("userInfo")).businessType
          : "",
        shopId: this.tid,
        type: "2"
      }).then(data => {
        if (data.code == 200) {
          // data.list.forEach((e) => {
          // 	e.image = e.image.split('|')
          // })
          console.log(data.list);
          this.imgs = data.list;
          this.articleTotal = data.count;
          this.addCardStyle();
        }
      });
    },
    getArticleInfo2() {
      this.$getHttp("/mob/user/getArticleInfo", this.articlePage2).then(
        data => {
          if (data.code == 200) {
            // data.list.forEach((e) => {
            // 	e.image = e.image.split('|')
            // })
            console.log(data.list);
            this.articleList2 = data.list;
            // this.articleTotal = data.count
          }
        }
      );
    },
    //获取首页广告
    getBanner() {
      this.$getHttp("/mob/home/getBanner", { type: 3 }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: this.$img + e.image
            });
          });
        }
      });
    },
    //店铺经纪人信息
    getAgentInfo() {
      this.$getHttp("/mob/user/getAgentInfoList", this.agentInfoPage).then(
        data => {
          if (data.code == 200) {
            data.page.list.filter(item => {
              return item.dutyStatus == "1";
            });
            console.log(data);
            this.agentInfoList = data.page.list;
            this.agentInfoTotal = data.page.list.length;
          }
        }
      );
    },
    collect3(type) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: 3,
            relationId: this.tid
          }
        ).then(data => {
          if (data.code == 200) {
            // 去关注
            if (type == 1) {
              this.isCollection = 1;
            } else {
              // 取消关注
              this.isCollection = 0;
            }
            this.$message({
              message: type == 1 ? "关注成功！" : "取消关注成功",
              type: "success",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "请登录之后在关注店铺！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    leibieClick(num) {
      this.leibieXuan = num;
      this.housePage.pageNo = 1;
      this.getMoreData();
      return;
      switch (num) {
        case 1:
          return;
          break;
        case 2:
          if (this.agentInfoList.length == 0) {
            this.getAgentInfo();
          }
          break;
        case 3:
          this.friendsCircle();
          break;
      }
    },
    // 获取帮友圈数据
    friendsCircle() {
      let arr = [{ id: 1 }, { id: 2 }];
      arr.forEach(v => {
        v.chage = 0;
      });
      this.ceshiArr = arr;

      // this.$nextTick(() => {
      //   /* 获取文本所在的div */
      // 	let contentDom = document.querySelectorAll('.helpFriends_article_text');
      //   contentDom = [...contentDom];
      //   contentDom.forEach(item => {
      //     let height=item.offsetHeight
      //       if (height>120) {
      //         item.classList.add('helpFriends_article_active')
      //       }else{
      //         // 获取展开收起的按钮
      //         item.nextElementSibling.classList.add('unfold_yc')
      //       }
      //   });
      // });
    },
    zhankaiClick(item) {
      this.ceshiArr.forEach(v => {
        if (v.id == item.id) {
          if (v.chage == 0) {
            v.chage = 1;
          } else {
            v.chage = 0;
          }
        }
      });
    },
    //开启聊天
    chat(id) {
      this.$refs.chats.chatOpne(id);
    },
    search() {
      if (this.searchtext.trim() != "") {
        const routeLink = this.$router.resolve({
          // path: "/index/vehicleSeach?search=" + this.searchtext+"&index=3",
          path: "/index/newDealer?search=" + this.searchtext
        });
        window.open(routeLink.href, "_self");
      }
    },
    currenthouse(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.housePage.pageNo = e;
      this.getMoreData();
    },
    currentagentInfo(e) {
      this.agentInfoPage.pageNo = e;
      this.getAgentInfo();
    },
    currentarticle(e) {
      this.articlePage.pageNo = e;
      this.getArticleInfo();
    },
    particulars(id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: "article",
          id: id
        }
      });
    },
    // toAgent(item) {
    //   this.openUrl({
    //     path: "/index/goldConsultant",
    //     query: {
    //       id: item.userInfo.id,
    //       // userId:item.userId,
    //     },
    //   });
    // },
    details(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      // this.imgs.unshift(this.imgs.pop());
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
      // console.log(this.currentIndex);
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // shopdetails(item) {
    //   if (item.userInfo.isAgent != 1) {
    //     this.$message({
    //       message: "个人车源！",
    //       type: "error",
    //       offset: 120,
    //       duration: 2000,
    //     });
    //   } else {
    //     this.openUrl({
    //       path: "/index/ShopDetails",
    //       query: {
    //         id: item.userInfo.shopId,
    //       },
    //     });
    //   }
    // },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      // this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    showWeigui(userId) {
      if (this.loginstate) {
        this.bUserId = userId;
        setTimeout(() => {
          this.$refs.inform.getReportMyRecord();
        }, 100);
      } else {
        this.$message({
          message: "请登录之后在进行评分",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }

      // const routeLink = this.$router.resolve({
      //         path: '/index/inform?userId='+userId
      //       })
      //     window.open(routeLink.href, '_blank')
    },
    // 点击
    chooseItem(item, index) {
      this.imgs.forEach(el => {
        if (item.image == this.$img + el.image) {
          localStorage.setItem("banner", JSON.stringify(el));
          // this.openUrl({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner"
          });
          window.open(routeLink.href, "_blank");
        }
      });
      //   let cycles = item.index;
      //   if (item.index < 3) {
      //     for (let i = 0; i < 3 - cycles; i++) {
      //       console.log(item.index);
      //       this.prev();
      //     }
      //     console.log("1");
      //   } else if (item.index > 3) {
      //     for (let i = -1; i < item.index - 3; i++) {
      //       this.next();
      //     }
      //     console.log("2");
      //   } else if (item.index == 3) {
      //     console.log("3");
      // 		this.imgs.forEach((e) =>{
      // 			if(e.index == 3){
      // 				this.bannerList.forEach((el) =>{
      // 					if(e.cover == (this.$img+el.image)){
      // 						localStorage.setItem("banner",JSON.stringify(el))
      // 						this.openUrl({
      // 						  path: "/index/particulars",
      // 						  query: {
      // 								type:'banner'
      // 						  },
      // 						});
      // 					}
      // 				})
      // 			}
      // 		})
      //   }
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },

    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s"
          });
        }
      }
    },
    //处理图片
    manageImg(imgs) {
      var arr = [];
      if (null != imgs) {
        if (imgs.indexOf("|") == -1) {
          if (imgs != "") {
            arr.push(imgs);
            console.log("imgs", arr);
            return arr;
          } else {
            return [];
          }
        } else {
          return imgs.split("|");
        }
      }
      return [];
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 920px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      display: inline-block;
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.tit_name {
  overflow: hidden;
  width: 920px;
  margin: 0 auto;
  margin-top: 0;

  div {
    display: inline-block;
    vertical-align: middle;
  }

  .p1 {
    font-size: 26px;
    color: #333333;
    font-weight: 600;
    margin-right: 48px;
    width: auto;
    max-width: 600px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.shopIntroduc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 920px;
  margin: 0 auto;
  margin-top: 15px;

  .shopIntroduc_left {
    display: flex;
    align-items: center;

    .p3 {
      font-size: 18px;
      color: #999999;
      width: 640px;
    }

    .p2 {
      font-size: 18px;
      color: #999999;
      width: 82px;
      border-right: 1px solid #999999;
      margin-right: 10px;
    }
  }

  .shopIntroduc_right {
    img {
      width: 33px;
      height: 33px;
    }
  }
}

.leibie {
  margin-top: 40px;
  width: 920px;
  margin-left: 50%;
  transform: translateX(-50%);

  div {
    display: inline-block;
    width: 108px;
    height: 50px;
    line-height: 50px;
    background: #f2f2f2;
    border-radius: 4px;
    font-size: 20px;
    text-align: center;
    margin-right: 16px;
    color: #333333;
    cursor: pointer;
  }

  .xuan {
    color: #fff;
    background: #64b6a8;
  }
}

.titLiat {
  width: 920px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 40px;
  margin-bottom: 15px;

  .li {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    color: #333;
    cursor: pointer;

    p {
      font-size: 26px;
    }

    img {
      width: 32px;
      height: 16px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: -8px;
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }
}

.helpFriends {
  width: 920px;
  margin: 0 auto;
  margin-top: 50px;

  .helpFriends_title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .helpFriends_title_left {
      display: flex;
      align-items: center;

      .helpFriends_title_left_img {
        width: 112px;
        height: 112px;
        border-radius: 50%;
      }

      .helpFriends_title_left_span {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
        margin-left: 40px;
      }
    }

    .helpFriends_title_right {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }

  .helpFriends_article {
    margin-top: 34px;

    .helpFriends_article_text {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
    }

    .helpFriends_article_active {
      font-size: 26px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .unfold {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 26px;
      font-weight: 400;
      color: #64b6a8;

      span {
        cursor: pointer;
      }

      .unfold_img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }

    .unfold_yc {
      display: none;
    }
  }

  .img_one {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_two {
    width: 100%;
    height: 290px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 48%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .img_three {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;

    img {
      object-fit: cover;
      width: 30%;
      height: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }

  .video {
    width: 100%;
    height: 290px;
    margin-top: 30px;

    video {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .byq_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items: center;

    .byq_bottom_right {
      display: flex;
      align-items: center;

      .byq_bottom_right_item {
        display: flex;
        align-items: center;
        font-size: 26px;
        font-weight: 400;
        color: #333333;
        margin-right: 35px;

        .byq_bottom_right_item_img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
  }
}

.bottom {
  width: 920px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .titLiat {
    width: 920px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    margin-bottom: 15px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;
      transform-origin: left;

      p {
        font-size: 26px;
      }

      img {
        width: 32px;
        height: 16px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: -8px;
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;

        .t_1 {
          font-size: 26px;
          cursor: pointer;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;
          white-space: nowrap;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            /* width: 90px; */
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;

        .p1 {
          //width: 120px;
          font-size: 32px;
          color: #e00000;
          text-align: center;
        }

        .p2 {
          //width: 120px;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.list2 {
  margin-top: 30px;
  color: #333;
  width: 920px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .li {
    box-sizing: border-box;
    margin-right: 13px;
    text-align: center;
    width: 290px;
    height: 384px;
    border: 1px solid #d0d0d0;
    margin-bottom: 15px;
    position: relative;

    .touxiang {
      width: 180px;
      height: 180px;
      margin-top: 14px;
    }

    .name {
      width: 100%;
      margin-top: 11px;
      display: flex;
      align-items: center;
      justify-content: center;

      .name_num {
        width: 120px;
        font-size: 14px;
        color: #333333;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .name_jjr {
        width: 58px;
        height: 22px;
        border-radius: 14px;
        border: 1px solid #64b6a8;
        font-size: 12px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 22px;
        margin-left: 15px;
      }
    }

    .pingfen {
      margin-top: 15px;

      div {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        margin-right: 15px;
      }

      img {
        vertical-align: middle;
        width: 26px;
        height: 26px;
        margin-right: 3px;
      }
    }

    .weigui {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;

      .wei {
        font-size: 13px;
        cursor: pointer;

        span {
          vertical-align: middle;
          margin-right: 10px;
        }
      }

      .contactWay {
        display: flex;
        align-items: center;
        margin-left: 30px;

        .lxfs-item {
          position: relative;
          color: #333333;

          .lxfs-item-phone {
            position: absolute;
            bottom: o;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        img {
          width: 26px;
          height: 26px;
        }
      }
    }

    .xian {
      position: absolute;
      left: -1px;
      bottom: -1px;
      width: 290px;
      height: 9px;
      background-color: #64b6a8;
    }
  }

  .li:nth-child(4n) {
    margin-right: 0px;
  }

  .lixuan {
    opacity: 0.4;
    cursor: pointer;
  }
}

.list3 {
  width: 920px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 33px;

  .li {
    position: relative;
    margin-bottom: 32px;

    .img {
      width: 300px;
      height: 200px;
    }

    .wenzi {
      display: inline-block;
      vertical-align: top;
      width: 876px;
      height: 154px;
      margin-left: 14px;

      .p1 {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .p6 {
        position: absolute;
        bottom: 0;
        color: #333333;

        span {
          font-size: 20px;
          display: block;
          margin-top: 10px;
        }
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.swiper {
  position: relative;
  width: 920px;
  height: 240px;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}

.vehicleTab {
  height: 110px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 1200px;
  margin-bottom: 32px;
  margin-left: 0 !important;

  .vehicleTabClass {
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    margin-right: 40px;
    cursor: pointer;
  }

  .vehicleTab_active {
    font-size: 26px;
    font-weight: 600;
    color: #64b6a8;
  }
}
</style>
